<template>
	<view class="strategy-page">
		<bnn-loading :loading="isLoading" />
		<view class="main-box">
			<swiper class="banner-list" circular autoplay disable-touch :current="typeIndex">
				<swiper-item v-for="(item, index) in banner" :key="index" >
					<image :src="item.cover" @click="toAnyPage(item.jump_link)" />
				</swiper-item>
			</swiper>

			<view class="strategy-list">
				<view v-for="(item, k) in list" :key="k" >
					<view class="strategy-item">
						<view class="arrow-top" v-if='item.pay_type == 0'>
							<view class='txt_1'>
								支持积分支付
							</view>
						</view>
						<!-- ======================================================== -->
						<strategy-two :info="item" :userInfo="userInfo" />
					</view>
				</view>
				<view v-if="list.length === 0">
					<strategy-empty />
				</view>
				<view v-else class="load-more">
					<bnn-load-more :status="loadStatus" />
				</view>
			</view>
		</view>
	</view>
</template>

<script module="chart">
	import {
		getBannerPage
	} from '@/api/addons.js'
	import {
		getStrategyPage
	} from '@/api/strategy.js'
	import BnnLoadMore from '@/components/bnn-ui/load-more/index.vue'
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	import StrategyListModel from '@/model/StrategyListModel.js'
	// import StrategyEmpty from '@/components/data-empty/strategy.vue'
	import StrategyEmpty from '@/components/data-empty/coupon.vue'
	import StrategyTwo from '@/components/strategy/strategyTwo.vue'
	import json from '@/static/json/echarts/strategy.json'
	import {
		MEMBER_INFO
	} from '@/config/storage.js'
	import {
		toAnyPage
	} from '@/utils/PageRouter.js'
	import {
		createOrder
	} from '@/api/trade.js'
	import lvSelect from '../../../components/lv-select/lv-select'
	export default {
		components: {
			BnnLoadMore,
			BnnLoading,
			StrategyEmpty,
			StrategyTwo,
			lvSelect
		},
		data() {
			return {
				isSchers: false,
				name: '',
				userInfo: {},
				isLoading: true,
				banner: [],
				typeIndex: 0,
				typeList: [{
						name: '期货策略'
					},
					{
						name: '策略组合'
					}
				],
				page: 1,
				limit: 10,
				// name:'李',
				loadStatus: 'loading',
				list: [],
				pay_type: []
			}
		},
		onNavigationBarSearchInputChanged(e) {
			// this.searchWords = e.text;
		},
		onNavigationBarSearchInputConfirmed() {
			uni.hideKeyboard(); //隐藏软键盘
			if (this.searchWords.trim().length == 0) {
				//搜索框内容为空
				return;
			}
			//搜索框内容不为空时操作
		},
		onTabItemTap(obj) {
			const userdata = uni.getStorageSync('MEMBER_INFO')
			if (!userdata) {
				uni.switchTab({
					url: '/pages/tabBar/user/index'
				})
			}
		},
		onLoad() {
			uni.$on('change-search', data => {
				this.page = 1
				this.name = data.name
				this.loadStatus = 'loading'
				this.getPage()
			})
			this.getBanner()
		},
		onShow() {
			this.userInfo = uni.getStorageSync(MEMBER_INFO) || {}
			const {
				list
			} = this
			if (list.length === 0) {
				this.getPage()
			}
		},
		//	下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.loadStatus = 'loading'
			this.getPage('refresh')
		},
		//	上拉加载
		onReachBottom() {
			this.getPage()
		},
		methods: {
			handleSearch() {
				this.loading = true
				setTimeout(() => {
					this.loading = false
					this.infoList = this.infoLists
				}, 2000)
			},
			change(val) {
				//val
			},
			//	切换类型
			onSwitchType(key) {
				this.typeIndex = key
			},
			getBanner() {
				getBannerPage({
					page: 1,
					limit: 2,
					location_id: 2
				}).then(res => {
					this.banner = res.data
				})
			},
			//	分页获取策略
			getPage(type = 'push') {
				// let data={
				// 	page: 1,
				// 	limit: 10,
				// 	name:'李',
				// }
				// getStrategyPage(data).then(res=>{
				// })
				const {
					page,
					limit,
					list,
					name
				} = this
				const params = {
					page,
					limit
				}
				if (name) {
					params.name = name
				}
				getStrategyPage(params).then(res => {
					const {
						data
					} = res
					
					const newData = data.map((item, ind) => {
						const Model = new StrategyListModel()
						const obj = Model.setAttributes(item).toObject()
						
						// obj.date = json[ind]['date']
						// obj.series = {
						// 	benchmark: json[ind]['benchmark_cum_return_plot'],
						// 	cum: json[ind]['cum_return_plot'],
						// 	relative: json[ind]['relative_cum_return_plot'],
						// }

						obj.date = item.earningsGraph.date
						obj.series = item.earningsGraph.accumulated_earnings
						obj.series1 = item.earningsGraph.IF
						obj.mark = item.earningsReport
						obj.cacudata = item.cacudata
						obj.left_stock = item.left_stock
						obj.subscription = item.subscription
						obj.pay_type = item.pay_type
						
						return obj
					})
					
					if (data.length) {
						this.list = page === 1 ? newData : list.concat(newData)
						// if (type === 'push') {
						// 	// this.list = list.concat(newData)
						// } else {
						// 	this.list = newData
						// }
						this.page = page + 1
					}

					if (data.length == 0 || data.length < limit) {
						this.loadStatus = 'noMore'
					}

					this.isLoading = false
					
					uni.stopPullDownRefresh()
				}).catch(res => {
					// this.isLoading = false
					uni.stopPullDownRefresh()
				})
			},
			//	跳转任意界面
			toAnyPage(url) {
				toAnyPage(url)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #ffffff;
	}
	.strategy-page {
		.main-box {
			width: 100vw;
			height: calc(100vh - var(--bottom-window-height));
			overflow: hidden;
		}
		// overflow: hidden;
		// overflow-y: auto;
		.sticky-box {
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			height: 80rpx;
			position: sticky;
			background-color: #fff;

			.type-list {
				height: 100%;
				padding: 0 20rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				background-color: #fff;

				.list-item {
					flex: 1;
					height: 100%;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
				}

				.list-item__underline {
					left: 50%;
					bottom: 0;
					width: 80rpx;
					height: 4rpx;
					display: none;
					position: absolute;
					transform: translateX(-50%);
					background-color: $theme_color;
				}

				.list-item.active {
					.list-item__box-name {
						font-weight: bold;
					}

					.list-item__underline {
						display: flex;
					}
				}
			}
		}

		//	banner 轮播图
		.banner-list {
			// height: 400rpx;
			height: 500rpx;
		}

		//	策略列表
		.strategy-list {
			background-color: #f4f5f6;
			.strategy-item {
				padding: 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				margin-top: 10px;

				&:last-child {
					margin-bottom: 0;
				}

				.arrow-top {
					position: relative;
					z-index: 100;
					left: 575rpx;
					top: 65rpx;
					color: #000000;
					/*移动距离为小三角的宽高*/
					width: 120rpx;
					margin-top: -80rpx;
					// height: 10rpx;
					border-width: 40rpx;
					/*小三角的高度*/
					border-style: solid;
					border-color: transparent transparent #3e8ef7 transparent;
					/*朝上的小三角*/
					transform: rotate(45deg);

					/*将小三角旋转到你想要的角度*/
					.txt_1 {
						width: 100%;
						line-height: 40rpx;
						text-align: center;
						position: absolute;
						font-size: 20rpx;
						color: #ffffff;
					}
				}
			}

			.arrow {}

		}
	}
</style>
